<section class="pc-banner">
	<div class="swiper-container banners">
		<div class="swiper-wrapper">
			<div :class="index==1?oneImg:otherImg" v-for="(item,index) in bannerList">
				<a :href="item.remark">
					<img :src="imgUrl+item.image">
				</a>
				<div class="layer-mask"></div>
			</div>
		</div>
	</div>
</section>
<link type="text/css" rel="stylesheet" href="css/banner.swiper.css">
<script type="text/javascript" src="js/swiper/swiper.min.js"></script>
<script type="text/javascript">

	/*window.onload = function() {
		var swiper = new Swiper('.banners',{
			autoplay: false,
			speed: 1000,
			delay:3000,
			autoplayDisableOnInteraction: false,
			loop: true,
			centeredSlides: true,
			slidesPerView: 2,
			pagination: '.swiper-pagination',
			paginationClickable: true,
			prevButton: '.swiper-button-prev',
			nextButton: '.swiper-button-next',
			onInit: function(swiper) {
				swiper.slides[2].className = "swiper-slide swiper-slide-active";
			},
			breakpoints: {
				668: {
					slidesPerView: 1,
				}
			},
		});
	}*/
	const App1 = {
		data() {
			return {
				imgUrl: 'http://dbs.wutp.com.cn/CM-API',
				bannerList: [],
				banner:'',
				oneImg:'swiper-slide swiper-slide-center none-effect',
				otherImg:'swiper-slide'
			};
		},
		mounted() {
			this.getBanner();
		},
		methods: {
			openUrl(remark) {
				debugger
				if (remark) {
					// window.location.href = remark
					window.open(remark)
				}
			},
			// 获取首页轮播图
			async getBanner() {
				let that = this;
				that.isLoadingShow = true;
				await axios({
					method: "get",
					url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBanner?type=SYLBT",
				}).then(function (res) {
					setTimeout(() => {
						new Swiper('.banners', {  //绑定如期换成id!!!
							autoplay: 3000,
							speed: 1000,
							delay:3000,
							autoplayDisableOnInteraction: false,
							loop: true,
							centeredSlides: true,
							slidesPerView: 2,
							pagination: '.swiper-pagination',
							paginationClickable: true,
							prevButton: '.swiper-button-prev',
							nextButton: '.swiper-button-next',
							onInit: function(swiper) {
								swiper.slides[2].className = "swiper-slide swiper-slide-active";
							},
							breakpoints: {
								668: {
									slidesPerView: 1,
								}
							},
						});
					}, 10)
					that.banner = res.data.data[0].image
					console.log(that.banner )
					that.bannerList = res.data.data;
					that.isLoadingShow = false;
				})
			},
		}
	};
	Vue.createApp(App1).mount('.pc-banner');


</script>
